<template>
  <div class="scroll-wrap address-warp">
    <scroll :data="data" v-if="data">
      <swipeout>
        <ul class="address-list">
          <li class="item" v-for="(item,key) in data" :key="key">
            <swipeout-item>
            <div slot="right-menu">
              <swipeout-button :width="120" @click.once.native="delAddress(item.address_id)" type="warn">删除</swipeout-button>
              <!-- <swipeout-button :width="120" @click.once.native="setDefault(item.address_id)" type="primary">选择</swipeout-button> -->
            </div>
            <div slot="content" class="left">
              <div class="main" @click.stop="setDefault(item)">
                <div class="select-default" v-if="item.status==='1'">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-ok1"></use>
                  </svg>
                </div>
                <div class="contact">
                  <span class="name">{{item.name}}</span><span class="tel">{{item.phone}}</span>
                </div>
                <div class="address">{{item.province}}{{item.city}}{{item.address}}</div>
              </div>
              <router-link tag="div" :to="'/address?address_id=' + item.address_id" class="edit" >编辑</router-link>
            </div>
          </swipeout-item>
          </li>
        </ul>
      </swipeout>
    </scroll>
    <router-link class="add_address" to="/address">添加新地址</router-link>
  </div>
</template>

<script>
/* eslint-disable */
import {Swipeout, SwipeoutItem, SwipeoutButton} from './base/swipeout/index'
import Cartcontrol from './cartcontrol'
import Scroll from './base/scroll'
import $http from '@/api'
export default {
  data() {
    return {
      data: null
    }
  },
  created() {
    this._getAddressList()
  },
  computed: {
  },
  methods: {
    _getAddressList() {
      $http.getAddressList()
        .then(res => {
          if (res.code === 0) {
            this.data = res.data
            if (!this.data.length) {
              location.href = '/address'
            }
          } else {
            this.$layer.toast({
              content: '网络失败，请稍后再试！',
              time: 2000
            })
          }
        })
    },
    _delData(id) {
      let data = this.data
      for (let i = data.length - 1; i >= 0; i--) {
        if (data[i].address_id === id){
          this.$set(this.data[0], 'status', "1")
          data.splice(i, 1)
          return;
        }
      }
    },
    _setDefault(id) {
      let data = this.data
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i].address_id === id && data[i].status !== '1'){
          this.$set(this.data[i], 'status', "1")
          let arr = this.data.splice(i, 1)
          this.data = arr.concat(this.data)
        } else if (data[i].status === '1') {
          this.$set(this.data[i], 'status', "0")
        }
      }
    },
    delAddress(id) {
      $http.delAddress(id)
      .then(res => {
        if (res.code === 0) {
          this._delData(id)
          this.$layer.toast({
            content: '删除成功！',
            time: 2000
          })
        } else {
          this.$layer.toast({
            content: '删除失败',
            time: 2000
          })
        }
      })

    },
    setDefault(item) {
      if (item.status === '1') {
        return
      }
      let id = item.address_id;
      $http.addressSetDefault(id)
      .then(res => {
        if (res.code === 0) {
          this._setDefault(id)
          this.$layer.toast({
            content: '设置默认成功！',
            time: 2000
          })
        } else {
          this.$layer.toast({
            content: '设置默认失败',
            time: 2000
          })
        }
      })
    }
  },
  components: {
    Cartcontrol,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    Scroll
  },
  watch: {
    $route() {
      this._getAddressList()
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../assets/styles/addresslist';
  .contact{
    display: flex;
    align-items: center;
    font-size: px2rem(14px);
    .name{
      color: $black;
      flex: 1;
    }
    .tel{
      color: $darker;
    }
  }
  .address{
    font-size: px2rem(12px);
    margin-top: px2rem(5px);
    color: $darker;
  }
</style>
